import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TestClipWidget extends StatefulWidget {
  const TestClipWidget({super.key});

  @override
  State<TestClipWidget> createState() {
    return _ClipState();
  }
}

class _ClipState extends State<TestClipWidget> {
  @override
  Widget build(BuildContext context) {
    // 头像
    Widget avatar = Image.asset("images/ic_launcher.png", width: 60.0);
    return Scaffold(
      appBar: AppBar(
        title: const Text("基础 Clip "),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Flutter中提供了一些剪裁组件，用于对组件进行剪裁'),
            avatar,
            const Text('\n ClipOval 子组件为正方形时剪裁成内贴圆形；为矩形时，剪裁成内贴椭圆'),
            ClipOval(child: avatar),
            const Text('\n ClipRRect 将子组件剪裁为圆角矩形'),
            ClipRRect(
              //剪裁为圆角矩形
              borderRadius: BorderRadius.circular(25.0),
              child: avatar,
            ),
            const Text('\n ClipRect 默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁）'),
            Align(
              alignment: Alignment.topLeft,
              widthFactor: .5, //宽度设为原来宽度一半
              child: avatar,
            ),
            ClipRect(
              //将溢出部分剪裁
              child: Align(
                alignment: Alignment.topLeft,
                widthFactor: .5, //宽度设为原来宽度一半
                child: avatar,
              ),
            ),
            const Text('\n ClipPath 按照自定义的路径剪裁'),
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
              child: ClipRect(
                  clipper: MyClipper(), //使用自定义的clipper
                  child: avatar),
            ),
            DecoratedBox(
              decoration: BoxDecoration(color: Colors.red),
              child: ClipPath(
                  clipper: MyPathClipper(), //使用自定义的clipper
                  child: avatar),
            ),
          ],
        ),
      ),
    );
  }
}

/**
 * getClip()是用于获取剪裁区域的接口，由于图片大小是60×60，
 * 我们返回剪裁区域为Rect.fromLTWH(10.0, 15.0, 40.0, 30.0)，
 * 即图片中部40×30像素的范围。
 * shouldReclip() 接口决定是否重新剪裁。如果在应用中，
 * 剪裁区域始终不会发生变化时应该返回false，这样就不会触发重新剪裁，
 * 避免不必要的性能开销。
 * 如果剪裁区域会发生变化（比如在对剪裁区域执行一个动画），那么变化后应该返回true来重新执行剪裁。
 */
class MyClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) => Rect.fromLTWH(10.0, 15.0, 40.0, 30.0);

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}

class MyPathClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    print("MyPathClipper >>1  ${size}");
    Path path = Path();
    path.reset();
    path.moveTo(size.width / 4, size.height / 4);
    path.lineTo(size.width - size.width / 4, size.height - size.height / 4);
    path.lineTo(size.width / 4, size.height - size.height / 4);
    path.lineTo(size.width / 4, size.height / 4);
    print("MyPathClipper >>2  ${path}");
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}
